<template>
  <div style="height:100%;">
    <div>
      <actionsheet :menus="menus" v-model="showMenu" @on-click-menu-changePassword="changePassword" @on-click-menu-logout="logout"></actionsheet>
    </div>

    <drawer width="200px;" :show.sync="drawerVisibility" show-mode="push">
      <div slot="drawer">
        <!-- 菜单内容 -->
        <group title="设备信息" style="margin-top:20px;">
          <cell title="台区" link="/substation" @click.native="drawerVisibility = false">
          </cell>
        </group>
        <group title="系统管理" style="margin-top:20px;" v-if='isAdmin'>
          <cell title="用户列表" link="/user" @click.native="drawerVisibility = false">
          </cell>
          <cell title="日志" link="/log" @click.native="drawerVisibility = false">
          </cell>
        </group>
      </div>

  <!-- <header data-am-widget="header" class="am-header am-header-default am-header-fixed">
      <div class="am-header-left am-header-nav">
          <a href="#left-link" class="">
                <i class="am-header-icon am-icon-bars"></i>
          </a>
      </div>

      <h1 class="am-header-title">
        <img :src="image" alt="yitai logo" />
      </h1>

      <div class="am-header-right am-header-nav">
          <a href="#right-link" class="">
                <i class="am-header-icon am-icon-cog"></i>
          </a>
      </div>
  </header> -->

      <!-- <mt-header fixed title="fixed top" >
        <mt-button icon="back" slot="left"></mt-button>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header> -->

      <!-- rourer-view 作为默认插槽内容 -->

      <view-box ref="viewBox" body-padding-top="60px" body-padding-bottom="20px">
        <x-header slot="header" title="slot:overwrite-title" style="width:100%;position:absolute;left:0;top:0;z-index:100;background-color:#fff;" :right-options="{showMore: true}" @on-click-more="onClickMore">
          <span slot="overwrite-left">
            <x-icon type="navicon" size="35" style="fill:#005E9C;position:relative;top:-8px;left:-3px;" @click="drawerVisibility = true"></x-icon>
          </span>
          <!-- 顶部中间的logo -->
          <!-- <img :src="image" alt="yitai_logo" slot="overwrite-title"> -->
        </x-header>
        <router-view class="router" name="main"></router-view>
      </view-box>

    </drawer>

    <!--弹窗-->
    <div>
      <confirm v-model="showConfirm" show-input title="请输入新的密码" @on-confirm="onConfirm">
      </confirm>
    </div>

  </div>
</template>

<script>
import { Group, Cell, Drawer, Actionsheet, XHeader, ViewBox,Confirm } from "vux";
import Http from "./../unit/http.js";

// import { Header } from 'mint-ui';

// Vue.component(Header.name, Header);


export default {
  components: {
    Group,
    Cell,
    Drawer,
    XHeader,
    Actionsheet,
    ViewBox,
    Confirm
  },
  data() {
    return {
      image: "https://i.loli.net/2018/11/01/5bda9ddd540b7.png",
      menus: {
        // "user.noop": '<span class="menu-title">qwe</span>',
        user:"",
        changePassword: "修改密码",
        logout: "退出登录"
      },
      showMenu: false,
      drawerVisibility: false,
      showConfirm: false,
      isAdmin: false,
    };
  },
  mounted() {
    this.getData()
    var role = sessionStorage.getItem("role")
    this.isAdmin = 1 == role;
  },
  methods: {
    getData(){
      this.menus.user = sessionStorage.getItem("sessionData");
    },
    changePassword() {
      this.showConfirm = true;
    },
    onConfirm(value) {
      //value为点击确定后，输入框的值
      //用Crypto-js加密password，后面再传输
      const CryptoJS = require("crypto-js");
      const AES = require("crypto-js/aes");
      //定义密钥
      const aesKey = "yitaikeji@#$&*,.";
      const aesIv = "RandomInitVector";
      //加密过程
      function aesCBC(text) {
        let aesText = text;
        const key = CryptoJS.enc.Utf8.parse(aesKey);
        const iv = CryptoJS.enc.Utf8.parse(aesIv);
        aesText = CryptoJS.AES.encrypt(text, key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        }).toString();
        return aesText;
      }
      const self = this;
      const encode = encodeURI(aesCBC(value)); //最终加密结果 aesCBC(这里是原密码)
  
      const param = { password:encode};
      const url = "/yitai/admin/user/changePassword";
      const success = function(response) {
       
        self.logout()
      };
      const failed = function(response) {
        
      };
      Http.http(url, param, success, failed);
    },

    onClickMore() {
      this.showMenu = true;
    },

    logout() {
      const self = this;
      const param = {};
      const url = "/yitai/admin/user/logout";
      const success = function(response) {
        self.$router.push({ path: "/" });
      };
      const failed = function() {
 
      };
      Http.http(url, param, success, failed);
    }
  }
};
</script>

<style lang="less">
@import "~vux/src/styles/reset.less";
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/tap.less";

body {
  background-color: #ffffff;
  color: #242424;
}
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.vux-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vux-header {
  border-bottom: 1px solid #005e9c;
}
.vux-header-title-area {
  margin: 0 auto !important;
  width: 140px !important;
}
.weui-cell_access .weui-cell__ft:after {
  border-color: #005e9c !important;
}
.weui-cells__title {
  color: #005e9c !important;
  font-size: 19px !important;
  font-weight: bold;
}
.weui-cells {
  font-size: 18px !important;
}
.vux-header .vux-header-right a {
  color: #005e9c !important;
}
.weui-actionsheet__menu div:first-child{
  color: #005e9c;
}
.router {
  padding: 1px;
}
</style>